<script setup>
import { reactive, ref } from 'vue';

//定义变量，这种方式不会动态改变
const username = "王庆波";
// 响应式数据定义,传统类型的数据格式
const pwd = ref("123456");
const age = ref(18);
// 对象或数组
const book = reactive({ 'bookName': 'Vue.js前端开发' });



// 修改密码的事件
function updatePwd() {
  // 响应式数据可以动态改变
  pwd.value = "qwerttyt";
  // 非响应式不能动态改变
  //username = "wangqingbo";
}


</script>

<template>
  <h1>第一个组件</h1>
  用户名：{{ username }} <br>
  密码：{{ pwd }} <br>
  <button @click="updatePwd">修改密码</button> <br>
  <button @dblclick="updatePwd">双击修改密码</button> <br>
  <br>
  <br>
  
</template>

<style scoped>
h1 {
  color: red;
}
</style>